<!--
 * Dialogs for mobile and desktop devices.
!-->

<section class="mega-dialog-container common-container">

    <!-- Email verfifcation required dialog !-->
    <div class="mega-dialog dialog-template-action verify-email fullsize-on-mobile hidden"
        role="dialog"
        aria-labelledby="verify-email-title"
        aria-modal="true">

        <header class="verify-email header">
            <i class="graphic sprite-fm-illustration img-dialog-account-lock"></i>
            <h2 id="verify-email-title" class="verify-email header-txt">[$19906]</h2>
        </header>

        <section class="content">
            <div class="verify-email content-block">
                <div class="text">
                    [$22247]
                </div>
                <div class="text">
                    [$22248]
                </div>
            </div>
        </section>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive large send-email">
                    <span>[$22252]</span>
                </button>
            </div>
        </footer>
    </div>
    <!-- end of Email verfifcation required dialog !-->

    <!-- Login to your MEGA account dialog !-->
    <div class="mega-dialog dialog-template-graphic verify-email-login-to-account type-480px227 fullsize-on-mobile hidden"
        role="dialog"
        aria-labelledby="verify-email-login-to-account-title"
        aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <div class="graphic sprite-fm-illustration img-dialog-login"></div>
            <h2 id="verify-email-login-to-account-title">[$1768]</h2>
        </header>

        <section class="content">
            <div class="login-set-pass content-block">
                <div class="text">[$22253]</div>
                <form class="account dialog-login-form">
                    <input class="underlinedText mail" data-icon="sprite-fm-mono icon-email" data-wrapper-class="small-txt disabled"
                        disabled name="susp-login-name" placeholder="[$195]" type="text" value="[$5533]"/>
                    <input class="underlinedText pass" data-icon="sprite-fm-mono icon-lock" data-wrapper-class="small-txt"
                        name="susp-login-password" placeholder="[$909]" type="password"/>
                </form>
            </div>
        </section>

        <footer>
            <div class="login-set-pass footer-container">
                <button class="mega-button positive next" tabindex="0" type="button">
                    <span>[$556]</span>
                </button>
                <button class="mega-button cancel-email-verify hidden" type="button">
                    <span>[$82]</span>
                </button>
            </div>
        </footer>
    </div>
    <!-- end of Login to your MEGA account dialog !-->

    <!--Set new password dialog !-->
    <div class="mega-dialog dialog-template-tool verify-email-set-new-pass type-480px227 fullsize-on-mobile hidden"
        role="dialog"
        aria-labelledby="verify-email-set-new-pass-title"
        aria-modal="true">

        <header>
            <h2 id="verify-email-set-new-pass-title">[$22254]</h2>
        </header>

        <section class="content">
            <div class="login-set-pass content-block">
                <div class="text">
                    [$22250]
                </div>
                <form class="account dialog-login-form-low-pad">
                    <input class="underlinedText strengthChecker pw1" data-icon="sprite-fm-mono icon-lock" data-wrapper-class="small-txt"
                        name="verify-email-set-new-pass1" placeholder="[$9074]" type="password"/>
                    <input class="underlinedText pw2" data-icon="sprite-fm-mono icon-lock-2" data-wrapper-class="small-txt"
                        name="verify-email-set-new-pass2" placeholder="[$9075]" type="password"/>
                </form>
            </div>
        </section>

        <footer>
            <div class="login-set-pass footer-container">
                <button class="mega-button positive finish" tabindex="0" type="button">
                    <span>[$set_new_pwd_confirm]</span>
                </button>
            </div>
        </footer>
    </div>
    <!-- end of Set new password dialog !-->

    <!--Cookie dialog !-->
    <!-- TODO: add a new template -->
    <div class="mega-dialog cookie-dialog fullsize-on-mobile hidden">

        <!-- Cookie settings !-->
        <div class="content-block step2 active">
            <div class="header medium">
                [$24644]
            </div>
            <div class="settings-tip">
                [$24645]
            </div>
            <div class="tabs">
                <div class="settings-tab current" data-type="current">
                    [$24646]
                </div>
                <div class="settings-tab saved" data-type="saved">
                    [$24647]
                </div>
            </div>
            <div class="scrollable-block">
                <!-- Settings !-->
                <div class="settings">
                    <div  class="settings-links hidden">
                        <a class="settings-link clickurl" href="/cookie" target="_blank">[$24629]</a>
                        <a class="settings-link clickurl" href="https://mega.io/privacy" target="_blank">[$386]</a>
                    </div>
                    <div class="settings-row" data-type="::all">
                        <div class="settings-cell">
                            <div class="settings-header">[$24643]</div>
                        </div>
                        <div class="settings-cell current">
                            <div class="toggle-header">[$24648]</div>
                            <div class="mega-switch all" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                         <div class="settings-cell saved">
                             <div class="toggle-header">[$24649]</div>
                            <div class="mega-switch all disabled toggle-on" role="switch" aria-checked="true" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                    </div>
                    <div class="settings-row" data-type="essential">
                        <div class="settings-cell">
                            <div class="settings-header">[$24650]</div>
                            <div class="settings-text">[$24651]</div>
                        </div>
                        <div class="settings-cell current">
                            <div class="mega-switch disabled toggle-on" role="switch" aria-checked="true" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                        <div class="settings-cell saved">
                            <div class="mega-switch disabled toggle-on" role="switch" aria-checked="true" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                    </div>
                    <div class="settings-row hidden" data-type="preferences">
                        <div class="settings-cell">
                            <div class="settings-header">[$24652]</div>
                            <div class="settings-text">[$24653]</div>
                            <div class="clear"></div>
                        </div>
                        <div class="settings-cell current">
                            <div class="mega-switch" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                         <div class="settings-cell saved">
                            <div class="mega-switch disabled" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                    </div>
                    <div class="settings-row" data-type="analytics">
                        <div class="settings-cell">
                            <div class="settings-header">[$24654]</div>
                            <div class="settings-text">[$24655] </div>
                        </div>
                        <div class="settings-cell current">
                            <div class="mega-switch" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                         <div class="settings-cell saved">
                            <div class="mega-switch disabled" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                    </div>
                    <div class="settings-row advertisement hidden" data-type="advertisement">
                        <div class="settings-cell">
                            <div class="settings-header">[$24656]</div>
                            <div class="settings-text">[$24657]</div>
                        </div>
                        <div class="settings-cell current">
                            <div class="mega-switch" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                         <div class="settings-cell saved">
                            <div class="mega-switch disabled" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                    </div>
                    <div class="settings-row hidden" data-type="thirdparty">
                        <div class="settings-cell">
                            <div class="settings-header">[$24658]</div>
                            <div class="settings-text">[$24659]
                            </div>
                            <a class="thirdparty details">[$24660]</a>
                            <div class="clear"></div>
                            <div  class="settings-links">
                                <a class="settings-link clickurl" href="/cookie" target="_blank">[$24629]</a>
                                <a class="settings-link clickurl" href="/privacy" target="_blank">[$386]</a>
                            </div>
                        </div>
                        <div class="settings-cell current">
                            <div class="mega-switch" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                         <div class="settings-cell saved">
                            <div class="mega-switch disabled" role="switch" aria-checked="false" tabindex="0">
                                <div class="mega-feature-switch"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-buttons">
                <button class="mega-button positive right save-settings">
                    <span>[$save_settings]</span>
                </button>
                <button class="mega-button positive right use-saved-settings hidden">
                    <span>[$24661]</span>
                </button>
                <button class="mega-button right use-current-settings hidden">
                    <span>[$24662]</span>
                </button>
                <button class="mega-button m-lnk left close-settings">
                    <span>[$1597]</span>
                </button>
            </div>
        </div>

    </div>
    <!-- end of Cookie dialog !-->

    <!-- Dialog: loginrequired-dialog -->
    <!-- Register/Login required dialog for desktop !-->
    <div class="mega-dialog dialog-template-message loginrequired-dialog hidden"
        role="dialog"
        aria-labelledby="loginrequired-dialog-title"
        aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-uni icon-warning"></i>
            <div>
                <h3 id="loginrequired-dialog-title"></h3>
                <p></p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button pro-register">
                    <span>[$1076]</span>
                </button>
                <button class="mega-button positive pro-login">
                    <span>[$171]</span>
                </button>
            </div>
        </footer>
    </div>

    <!-- Thank You overlay dialog -->
    <div class="thankyou-dialog theme-dark-forced hidden"
        role="dialog"
        aria-labelledby="thankyou-title"
        aria-modal="true">

        <div class="thankyou-close">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </div>
        <div class="thankyou-body">
            <h1 id="thankyou-title" class="thankyou-header">[$24851]</h1>
            <div class="thankyou-txt"></div>
            <i class="thankyou-icon sprite-fm-uni icon-success"></i>
            <button class="mega-button positive large thankyou-button">
                <span>[$726]</span>
            </button>
        </div>
    </div>

    <!-- Dialog: Cannot view offer dialog -->
    <div class="mega-dialog dialog-template-message cannotviewoffer-dialog hidden"
        role="dialog"
        aria-labelledby="cannotviewoffer-dialog-title"
        aria-modal="true">

        <button class="close js-close" aria-label="[$148]">
            <i class="sprite-fm-mono icon-dialog-close"></i>
        </button>

        <header>
            <i class="graphic sprite-fm-uni icon-warning"></i>
            <div>
                <h3 id="cannotviewoffer-dialog-title"></h3>
                <p></p>
            </div>
        </header>

        <footer>
            <div class="footer-container">
                <button class="mega-button positive ok-close">
                    <span>[$81]</span>
                </button>
            </div>
        </footer>
    </div>

</section>

<section class="mega-banner-container">

    <div class="mega-banner-template cookie-banner hidden"
        role="dialog"
        aria-labelledby="cookie-banner-title" >

        <div class="content">

            <div class="header-container">
                <header>
                    <div class="info">
                        <h3 id="cookie-banner-title">[$cookie_manage_cookies]</h3>
                        <p class="current hidden">
                            [$cookie_banner_txt]
                        </p>
                        <p class="experiment hidden">
                            [$cookie_banner_txt_upd_cookies]
                        </p>
                    </div>
                </header>
                <div class="reject-all hidden">
                    [$cookie_banner_reject_all]
                </div>
            </div>

            <div class="buttons">
                <button class="mega-button cookie-settings">
                    <span>[$24644]</span>
                </button>
                <button class="mega-button positive accept-cookies">
                    <span>[$accept_cookies]</span>
                </button>
            </div>

        </div>
    </div>

</section>
